<template>
  <el-container class="withdraw-page panel-block">
    <el-main class="sa-p-24">
      <el-table class="sa-table" :data="[{}]" row-key="id" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column label="拼团商品" min-width="490" align="center">
          <template #default>
            <div class="sa-flex" v-if="table.data.goods">
              <div class="sa-m-r-8">
                <sa-preview :url="table.data.goods.image" size="40"></sa-preview>
              </div>
              <div class="sa-flex-col sa-col-top">
                <span
                  class="sa-table-line-1 goods-title cursor-pointer"
                  @click="openGoods(table.data.goods_id)"
                >
                  {{ table.data.goods.title || '-' }}
                </span>
                <span class="sa-table-line-1"> 成团人数：{{ table.data.num }} </span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开团时间" min-width="174" align="center">
          <template #default>
            {{ table.data.create_time || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="拼团状态" min-width="80" align="center">
          <template #default>
            <div
              :class="
                table.data.status == 'invalid'
                  ? 'sa-color--danger'
                  : table.data.status == 'ing'
                  ? 'sa-color--warning'
                  : 'sa-color--success'
              "
            >
              {{ table.data.status_text || '-' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-table class="sa-table" :data="table.data.grouponLogs" row-key="id" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column label="身份" min-width="80" align="center">
          <template #default="scope">
            <span v-if="scope.row.is_leader == 1">团长</span>
            <span v-else>团员</span>
          </template>
        </el-table-column>
        <el-table-column label="头像" width="64">
          <template #default="scope">
            <sa-image :url="scope.row.avatar" size="32" radius="16"></sa-image>
          </template>
        </el-table-column>
        <el-table-column label="昵称" width="258">
          <template #default="scope">
            <sa-user-profile
              :user="scope.row"
              :id="scope.row.user_id"
              :isAvatar="false"
              :isHover="!scope.row.is_fictitious"
            />
          </template>
        </el-table-column>
        <el-table-column label="参团时间" min-width="170" align="center">
          <template #default="scope">
            {{ scope.row.create_time || '-' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" min-width="170" align="center">
          <template #default="scope">
            <span
              class="goods-title cursor-pointer"
              @click="define(scope.row)"
              v-if="scope.row.is_temp"
              >确定</span
            >
            <span
              class="sa-color--danger cursor-pointer sa-m-l-10"
              @click="cancel(scope.$index)"
              v-if="scope.row.is_temp"
              >取消</span
            >
            <span v-if="scope.row.is_fictitious == 1 && !scope.row.is_temp">虚拟</span>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer class="sa-footer--submit sa-flex sa-row-between" v-if="table.data.status == 'ing'">
      <el-popconfirm
        width="fit-content"
        confirm-button-text="确认"
        cancel-button-text="取消"
        title="确定要解散拼团吗？"
        @confirm="invalidRow"
      >
        <template #reference>
          <el-button v-auth="'shop.admin.activity.groupon.invalid'">解散拼团</el-button>
        </template>
      </el-popconfirm>

      <el-button v-auth="'shop.admin.activity.groupon.adduser'" type="primary" @click="confirm"
        >添加虚拟人数</el-button
      >
    </el-footer>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../activity.service';
  import { api as dataApi } from '@/app/shop/admin/data/data.service';
  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });
  // 列表
  const table = reactive({
    data: [],
    order: '',
    sort: '',
    selected: [],
  });
  const is_temp = ref(false);
  const loading = ref(true);
  // 获取
  async function getDetail(id) {
    loading.value = true;
    const { error, data } = await api.groupon.detail(id);
    error === 0 && (table.data = data);
    loading.value = false;
  }
  //添加虚拟人
  async function confirm() {
    const { data } = await dataApi.fakeUser.getRandom();
    table.data.grouponLogs.push({
      avatar: data.avatar,
      nickname: data.nickname,
      is_fictitious: 1,
      is_temp: true,
    });
  }
  //确定
  async function define(row) {
    const { error } = await api.groupon.addUser(table.data.id, {
      avatar: row.avatar,
      nickname: row.nickname,
    });
    if (error == 0) {
      is_temp.value = false;
      getDetail(props.modal.params.id);
    }
  }
  //取消
  function cancel(e) {
    table.data.grouponLogs.splice(e, 1);
  }
  //解散拼团
  async function invalidRow(row) {
    const { error } = await api.groupon.invalid(table.data.id);
    if (error == 0) {
      emit('modalCallBack', {
        event: 'confirm',
      });
    }
  }
  async function init() {
    if (props.modal.params.id) {
      await getDetail(props.modal.params.id);
    }
  }
  onMounted(() => {
    init();
  });
</script>
<style lang="scss" scoped>
  .goods-title {
    color: var(--el-color-primary);
  }
  :deep() {
    .nickname {
      font-size: 14px !important;
    }
  }
</style>
